<template>
    <h2>v-bind得案例 实现动态样式得更换</h2>
    <p v-bind:id="id">v-bind得原始样式</p>
    <button v-on:click="onChange">点击改变样式</button>&nbsp;
    <!--简易模式编写-->
      <button @click="id='d2'">点击改变对应得值</button>
</template>
<script setup>
import { ref } from 'vue';

const id = ref("d1")
// function onChange() {
//     id.value="d2"
// }
//它是 箭头函数 在es6里面操作方式
let onChange = () => { 
    id.value = "d2"
}

</script>
<style scoped>
#d1{
    color: red;
    background-color: bisque;
}
#d2{
    color: aqua;
    background-color: black;
}

</style>